<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>论文检索系统</title>

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/mainstyle.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
</head>

<body>
    <div th:replace="common :: commonheader"></div>

    <div th:replace="common :: leftmenu"></div>

    <div class="right-content col-md-10">
        <form class="form-inline" th:action="@{/user/findAllPapers}" method="post" style="margin-top: 20px;"
              onkeydown="if(event.keyCode===13){return false;}">
            <div class="search">
                <div class="form-group">
                    <label style="font-size: 25px">搜索：</label>
                    <input type="text" name="subTitle" id="subTitle" style="font-size: 20px; border-radius: 4px;
                border: 2px solid #ccc;" autocomplete="off">
                </div>
                <button type="submit" onclick="return search()" style="font-size: 20px;">检索</button>
            </div>
            <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
        </form>
    </div>

    <div class="right-content col-md-10" style="margin-top: 15px; margin-left: 15px;
    background-color: lightgrey; width: 1250px; height: 30px;" th:if="${subTitle} != 'null'">
        <div style="float: right; margin-top: 5px;">
            <a id="a_time" style="margin-right: 20px;" th:href="@{/user/findAllPapers(currentPage='1',
            subTitle=${subTitle}, order='time')}">发表时间</a>
            <a id="a_download" th:href="@{/user/findAllPapers(currentPage='1', subTitle=${subTitle},
            order='download')}">下载次数</a>
        </div>
    </div>

    <div class="right-content col-md-10" th:fragment="paperInfo" th:if="${subTitle} != 'null'" style="margin-top: 15px">
        <table class="table table-bordered" id="table-general">
            <thead>
                <tr>
                    <th style="width: 80px;background-color: lightblue;">序号</th>
                    <th style="background-color: lightblue;">分类号</th>
                    <th style="width: 500px;background-color: lightblue;">论文名称</th>
                    <th style="width: 70px;background-color: lightblue;">作者</th>
                    <th style="width: 500px;background-color: lightblue;">关键字</th>
                    <th style="width: 150px;background-color: lightblue;">论文类别</th>
                    <th style="width: 170px;background-color: lightblue;">发表时间</th>
                    <th style="width: 170px;background-color: lightblue;">下载次数</th>
                    <th style="width: 150px;background-color: lightblue;">下载</th>
                    <th style="width: 150px;background-color: lightblue;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="paperInfo, paperInfoStat : ${paperInfoList}">
                    <td>[[${paperInfoStat.count + (pageInfo.pageNum - 1) * pageInfo.pageSize}]]</td>
                    <td>[[${paperInfo.classnum}]]</td>
                    <td id="ptitle">[[${paperInfo.title}]]</td>
                    <td>[[${paperInfo.author}]]</td>
                    <td>[[${paperInfo.keyword}]]</td>
                    <td>[[${paperInfo.type}]]</td>
                    <td>[[${paperInfo.time}]]</td>
                    <td>[[${paperInfo.download}]]</td>
                    <td><a th:href="@{/paperinfo/downloadPaper(id=${paperInfo.id}, address=${paperInfo.address})}">
                        点此下载</a></td>
                    <td><a th:href="@{/paperinfo/showPaperInfo(id=${paperInfo.id})}">查看</a></td>
                </tr>
            </tbody>
        </table>

        <div class="row-fluid">
            <div>
                当前第[[${pageInfo.pageNum}]]页  总计[[${pageInfo.pages}]]页  共[[${pageInfo.total}]]条记录
            </div>
            <div>
                <ul class="pagination" th:if="${pageInfo.total == 0 || (pageInfo.isFirstPage && pageInfo.isLastPage)}">
                </ul>
                <ul class="pagination" th:if="${pageInfo.isFirstPage && !pageInfo.isLastPage}">
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.nextPage}, subTitle=${subTitle},
                    order=${order})}">下一页</a></li>
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.pages}, subTitle=${subTitle},
                    order=${order})}">尾页</a></li>
                </ul>
                <ul class="pagination" th:if="${pageInfo.isLastPage && !pageInfo.isFirstPage && pageInfo.total != 0}">
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.firstPage}, subTitle=${subTitle},
                    order=${order})}">首页</a></li>
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.prePage}, subTitle=${subTitle},
                    order=${order})}">上一页</a></li>
                </ul>
                <ul class="pagination" th:if="${!pageInfo.isLastPage && !pageInfo.isFirstPage}">
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.firstPage}, subTitle=${subTitle},
                    order=${order})}">首页</a></li>
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.prePage}, subTitle=${subTitle},
                    order=${order})}">上一页</a></li>
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.nextPage}, subTitle=${subTitle},
                    order=${order})}">下一页</a></li>
                    <li><a th:href="@{/user/findAllPapers(currentPage=${pageInfo.pages}, subTitle=${subTitle},
                    order=${order})}">尾页</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

<script th:inline="javascript">
    document.getElementById("li_head1").className = "active";

    document.getElementById("a_general").style.backgroundColor = "#4CAF50";
    document.getElementById("a_general").style.color = "white";

    // 查询的关键字变成红色并且加粗
    let title = [[${subTitle}]].toString();
    let table = document.getElementById("table-general");
    let row = null;
    if (table != null) row = table.rows.length;
    if (row != null) {
        for (let i = 1; i < row; i++) {
            for (let j = 2; j <= 4; j++) {
                let ptitle = table.rows[i].cells[j];
                let ptitles = ptitle.innerHTML;
                let values = ptitles.split(title);
                ptitle.innerHTML = values.join('<span style="color: red; font-weight: bold">' + title + '</span>');
            }
        }
    }

    let order = [[${order}]].toString();
    if (order === "time") {
        if (document.getElementById("a_time") != null) {
            document.getElementById("a_time").style.color = "blue";
            document.getElementById("a_time").style.fontWeight = "bold";
        }
    }
    else {
        if (document.getElementById("a_download") != null) {
            document.getElementById("a_download").style.color = "blue";
            document.getElementById("a_download").style.fontWeight = "bold";
        }
    }

    // 判断检索内容是否为空
    function search() {
        let subTitle = document.getElementById("subTitle").value;
        if (subTitle === "") {
            alert("请输入检索内容！");
            return false;
        }
        return true;
    }
</script>
<script th:inline="javascript">
    let $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    }

    let Bind = function(object, fun) {
        return function() {
            return fun.apply(object, arguments);
        }
    }

    function AutoComplete(obj, autoObj, arr) {
        this.obj = $(obj); // 输入框
        this.autoObj = $(autoObj); // DIV的根节点
        this.value_arr = arr; // 不要包含重复值
        this.index = -1; // 当前选中的DIV的索引
        this.search_value = ""; // 保存当前搜索的字符
    }

    AutoComplete.prototype= {
        // 初始化DIV的位置
        init: function () {
            this.autoObj.style.left = this.obj.offsetLeft + "px";
            this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
            this.autoObj.style.width = this.obj.offsetWidth - 2 + "px"; // 减去边框的长度2px
        },

        // 删除自动完成需要的所有DIV
        deleteDIV: function () {
            while (this.autoObj.hasChildNodes()) {
                this.autoObj.removeChild(this.autoObj.firstChild);
            }
            this.autoObj.className = "auto_hidden";
        },

        // 设置值
        setValue: function (_this) {
            return function () {
                _this.obj.value = this.seq;
                _this.autoObj.className = "auto_hidden";
            }
        },

        // 模拟鼠标移动至DIV时，DIV高亮
        autoOnmouseover: function (_this, _div_index) {
            return function () {
                _this.index = _div_index;
                let length = _this.autoObj.children.length;
                for (let j = 0; j < length; j++) {
                    if (j !== _this.index) {
                        _this.autoObj.childNodes[j].className = 'auto_onmouseout';
                    } else {
                        _this.autoObj.childNodes[j].className = 'auto_onmouseover';
                    }
                }
            }
        },

        // 更改classname
        changeClassname: function (length) {
            for (let i = 0; i < length; i++) {
                if (i !== this.index) {
                    this.autoObj.childNodes[i].className = 'auto_onmouseout';
                } else {
                    this.autoObj.childNodes[i].className = 'auto_onmouseover';
                    this.obj.value = this.autoObj.childNodes[i].seq;
                }
            }
        },

        //响应键盘
        pressKey: function (event) {
            let length = this.autoObj.children.length;
            if (typeof (event) != "undefined") {
                // 光标键"↓"
                if (event.keyCode === 40) {
                    ++this.index;
                    if (this.index > length) {
                        this.index = 0;
                    } else if (this.index === length) {
                        this.obj.value = this.search_value;
                    }
                    this.changeClassname(length);
                }
                // 光标键"↑"
                else if (event.keyCode === 38) {
                    this.index--;
                    if (this.index < -1) {
                        this.index = length - 1;
                    } else if (this.index === -1) {
                        this.obj.value = this.search_value;
                    }
                    this.changeClassname(length);
                }
                //回车键
                else if (event.keyCode === 13) {
                    this.autoObj.className = "auto_hidden";
                    this.index = -1;
                } else {
                    this.index = -1;
                }
            }
        },

        // 程序入口
        start: function (event) {
            if (typeof (event) != "undefined" && event.keyCode !== 13 && event.keyCode !== 38 && event.keyCode !== 40) {
                this.init();
                this.deleteDIV();
                this.search_value = this.obj.value;
                let valueArr = this.value_arr;
                valueArr.sort();
                if (this.obj.value.replace(/(^\s*)|(\s*$)/g, '') === "") {
                    return;
                }//值为空，退出
                try {
                    var reg = new RegExp("(" + this.obj.value + ")", "i");
                } catch (e) {
                    return;
                }
                let div_index = 0; // 记录创建的DIV的索引
                for (let i = 0; i < valueArr.length; i++) {
                    if (reg.test(valueArr[i])) {
                        let div = document.createElement("div");
                        div.className = "auto_onmouseout";
                        div.seq = valueArr[i];
                        div.onclick = this.setValue(this);
                        div.onmouseover = this.autoOnmouseover(this, div_index);
                        div.innerHTML = valueArr[i].replace(reg, "<strong>$1</strong>"); // 搜索到的字符粗体显示
                        this.autoObj.appendChild(div);
                        this.autoObj.className = "auto_show";
                        div_index++;
                    }
                }
            }
            this.pressKey(event);

            window.onresize = Bind(this,function(){this.init();});
        }
    }
</script>
<script th:inline="javascript">
    let data = [];
    let autoComplete = new AutoComplete('subTitle','auto',data);

    function check() {
        let subTitle = document.getElementById("subTitle").value;
        if (subTitle != null && subTitle !== "" && typeof (event) != "undefined" && event.keyCode !== 13 && event.keyCode !== 38 && event.keyCode !== 40) {
            jQuery.ajax({
                url: "/user/findSubtitlesByName",
                type: "post",
                async : false,
                data: {
                    "subTitle": subTitle
                },
                dataType: "JSON",
                success: function(data) {
                    autoComplete.value_arr = data;
                },
                error: function(errorMsg) {
                    console.log(errorMsg);
                }
            });
        }
        autoComplete.start(event);
    }

    function throttle(method,delay,duration){
        let timer=null, begin=new Date();
        return function(){
            let context=this, args=arguments, current=new Date();
            clearTimeout(timer);
            if(current-begin>=duration){
                method.apply(context,args);
                begin=current;
            }else{
                timer=setTimeout(function(){
                    method.apply(context,args);
                },delay);
            }
        }
    }

    window.onkeyup = throttle(check,100,200);
</script>

</html>